<template>
  <div class="page-all-content">
    <div class="header-content">
      <img
        class="header-icon"
        referrerpolicy="no-referrer"
        src="@/assets/img/module1/page1top2.png"
      />
      <span class="header-title">空域使用批复处理</span>
    </div>
    <!-- GIS展示 -->
    <div id="cesiumContainer-pifu" class="page-with-background"></div>

    <div class="left-panel-container">
      <div class="img_left_title">
        <img src="@/assets/img/module2/content.png" style="width: 100%" />
        <img
          src="@/assets/img/module2/snailtitleicon.png"
          style="position: absolute; top: -10%; left: 6%"
        />
        <span class="text_left_title">空域批复文件</span>
      </div>

      <button
        v-if="!tableVisible"
        class="table-button-display"
        @click="tableVisible = true"
      >
        显示
      </button>
      <button
        v-if="tableVisible"
        class="table-button-hidden"
        @click="tableVisible = false"
      >
        隐藏
      </button>

      <!-- 功能输入按钮部分 -->
      <div v-if="tableVisible" class="table-actions">
        <!-- 搜索框 -->
        <input
          type="text"
          v-model="searchQuery"
          placeholder="请输入关键字"
          class="search-input"
        />
        <!-- 查询按钮 -->
        <button @click="filterTable" class="filter-button"></button>
        <!-- 排序选择 -->
        <select v-model="selectedSort" class="sort-select" @change="sortTable">
          <option value="application_acceptance_time" class="sort-select-item">
            按时间最新
          </option>
          <option value="id" class="sort-select-item">按序号排序</option>
        </select>

        <button @click="sortInverse" class="sort-button"></button>

      </div>

      <!-- 表格内容 -->
      <div v-if="tableVisible" class="table-context">
        <GoodTable
          :data="tableData"
          :columns="columns"
          @viewDetails="handleViewDetails"
          @viewDetailsHover="handleViewDetailsHover"
          @hoverLeave="hoverLeave"
          height="100%"
          ref="goodTable"
        />

      </div>
    </div>

    <!-- 弹窗内容 -->
    <div class="right-panel-container">
      <GoodDialog
        :visible.sync="statusDialogVisible"
        :selectedDetails="selectedDetails"
        @submitClickTransfer="submitVisibleChange"
        @withdrawClickTransfer="withdrawVisibleChange"
        ref="statusDialog"
        @entity-change="entityViewChange"
      >
      </GoodDialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import GoodTable from "@/components/GoodTable.vue";
import GoodDialog from "@/components/GoodDialog.vue";
import {
  drawCylinderAreaM1,
  draw3DRectangularPipelineTrackM1_2,
  draw3DPolygonalPrismM1,
} from "@/utils/draw3D-module2.js";
export default {
  name: "Module3UsageConditions",
  components: {
    GoodTable,
    GoodDialog,
  },
  data() {
    return {
      tableVisible: true, // 控制表格显示
      statusSubmitDialogVisible: false, // 状态弹窗显示
      statusWithdrawDialogVisible: false,
      statusDialogVisible: false,
      selectedDetails: {}, // 存储选中的行数据
      selectedSort: "id", // 默认按序号排序
      searchQuery: "", // 搜索关键字
      inverseSort: true, // 排序顺序，默认升序
      fileList: [], // 上传文件列表
      tableData: [], // 表格数据从服务器获取
      gisdata: [],
      entityMap: {}, // 存储GIS实体对象
      columns: [
        { prop: "id", label: "#", width: "10%" },
        { prop: "approvalFileName", label: "批复文件", width: "45%" },
        { prop: "applicationAcceptanceTime", label: "创建时间", width: "45%" },
      ],
    };
  },
  created() {
    // 页面加载时获取数据
    this.fetchTableData();
  },

  mounted() {
    this.initializeCesium();
  },

  beforeDestroy() {
    this.cesiumDestroy();
  },

  methods: {
    // 获取GIS数据
    async initializeCesium() {
      try {
        window.viewer = new Cesium.Viewer("cesiumContainer-pifu", {
          geocoder: false, //搜索工具
          homeButton: false, //平滑视角默认视角
          sceneModePicker: false, //2D/3D切换
          baseLayerPicker: false, //底图切换
          navigationHelpButton: false, //帮助按钮
          animation: false, //动画播放
          fullscreenButton: false, //全屏按钮
          timeline: false, //时间轴
        });
        window.viewer.scene.frameState.creditDisplay.container.style.display =
          "none";
        console.log("initializeCesium");

        viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(113.5, 22.1, 100000),
        });
      } catch (error) {
        console.error("Cesium initialization failed:", error);
      }
    },

    async drawgis(row) {
      try {
        window.viewer.entities.removeAll();
        this.refreshGISdata(); // 刷新gis数据
        this.fetchGISData(row); // 获取gis数据
        let currentLabelEntity = null;

        const { circular, polygonal, straight } = this.gisdata;
        const entitiesToFlyTo = [];
        console.log("得到GIS数据");

        // 先画圆形
        // console.log("circular.length", circular.length)
        if (circular.length > 0) {
          circular.forEach((coord, index) => {
            console.log(coord.minAltitude);
            console.log(coord.maxAltitude);
            const entity = drawCylinderAreaM1(
              window.viewer,
              coord.longitude,
              coord.latitude,
              // coord.minAltitude,
              // coord.maxAltitude,
              100,

              800,
              // coord.radius,
              1200,
              "GREEN",
              0.5
            );
            if (entity) {
              entity.properties = new Cesium.PropertyBag({
                index: coord.index, // 自定义index字段
                activeIndex: coord.activeidentityid, // 自定义activeIndex字段
              });

              //暂时去掉
              // this.gisdata.circular[index].entity = entity;
              this.addEntity(coord.activeidentityid, coord.index, entity);
              // console.log("entity",entity)
              // console.log("this.gisdata.circular[index]",this.gisdata.circular[index])
              entitiesToFlyTo.push(entity);
            }
          });
        }
        // console.log("entitiesToFlyTo.length", entitiesToFlyTo.length)
        // 绘制多边形
        // console.log("polygonal.length", polygonal.length)
        if (polygonal.length > 0) {
          polygonal.forEach((track, index) => {
            // console.log("绘制多边形柱状体传入的数据", track)
            // console.log("经纬度坐标信息", track.coordinates.map(coord => [coord.longitude, coord.latitude]).flat())
            // console.log("最小高度", track.minAltitude)
            const entity = draw3DPolygonalPrismM1(
              window.viewer,
              track.coordinates
                .map((coord) => [coord.longitude, coord.latitude])
                .flat(),
              track.minAltitude,
              track.maxAltitude,
              // 100,
              // 800,
              "BLUE",
              0.5
            );
            if (entity) {
              entity.properties = new Cesium.PropertyBag({
                index: track.index, // 自定义index字段
                activeIndex: track.activeidentityid, // 自定义activeIndex字段
              });
              //暂时去掉
              // this.gisdata.polygonal[index].entity = entity;
              entitiesToFlyTo.push(entity);
              this.addEntity(track.activeidentityid, track.index, entity);
            }
          });
        }
        // console.log("entitiesToFlyTo.length", entitiesToFlyTo.length)

        // 绘制长方体管道轨迹（如果有的话）
        //  console.log("straight.length", straight.length)
        if (straight.length > 0) {
          console.log("绘制长方体管道传入的数据", straight);
          straight.forEach((track, index) => {
            const coordinates = track.coordinates
              .map((coord) => [coord.longitude, coord.latitude, coord.altitude])
              .flat();
            const pointNames = track.activeidentityid; // 获取每个轨迹点的名字

            // Ensure sizes array has the correct length
            const sizes = new Array(coordinates.length / 3 - 1).fill([100, 50]); // 对应生成每段长宽

            // Check if sizes length matches coordinates length - 1
            if (sizes.length !== coordinates.length / 3 - 1) {
              console.error(
                "Sizes array length does not match coordinates array length minus one"
              );
            } else {
              const entities = draw3DRectangularPipelineTrackM1_2(
                window.viewer,
                coordinates,
                sizes,
                "YELLOW"
                // pointNames // 传递轨迹点名字数组
              );
              if (entities) {
                // console.log("typeof entities",entities);
                entities.forEach((entity, num) => {
                  entity.properties = new Cesium.PropertyBag({
                    index: track.index, // 自定义index字段
                    activeIndex: track.activeidentityid, // 自定义activeIndex字段,
                  });

                  entitiesToFlyTo.push(entity);
                  console.log("添加实体", num);
                });
                //暂时去掉
                this.addEntity(track.activeidentityid, track.index, entities);
                // this.gisdata.straight[index].entity = entities;
              }
            }
          });
        }
        // console.log("entitiesToFlyTo.length", entitiesToFlyTo.length)

        // console.log("entitiesToFlyTo.length", entitiesToFlyTo.length)
        // 调整实体视角
        if (entitiesToFlyTo.length > 0) {
          window.viewer.flyTo(entitiesToFlyTo, {
            duration: 2,
            offset: {
              heading: Cesium.Math.toRadians(0),
              pitch: Cesium.Math.toRadians(-30), // 视角抬高一些
              roll: 100,
            },
          });
        }

        console.log("entityMap", this.entityMap);

        // 鼠标左键点击事件
        window.viewer.screenSpaceEventHandler.setInputAction((movement) => {
          // 清除之前的标签实体
          if (currentLabelEntity) {
            window.viewer.entities.remove(currentLabelEntity);
            currentLabelEntity = null;
          }

          const pickedObject = window.viewer.scene.pick(movement.position);

          if (
            pickedObject &&
            pickedObject.id &&
            pickedObject.id.properties &&
            pickedObject.id.properties.activeIndex
          ) {
            this.$refs.statusDialog.clickGis(
              pickedObject.id.properties.activeIndex.getValue(),
              pickedObject.id.properties.index.getValue()
            );
            window.viewer.flyTo(pickedObject.id);
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        console.log("方案地图组件渲染成功");
      } catch (error) {
        console.error("方案地图组件渲染失败", error);
      }
    },

    // 销毁Cesium实例
    cesiumDestroy() {
      if (window.viewer) {
        window.viewer.destroy();
        window.viewer = null;
      }
      console.log(window.viewer);
    },

    async fetchGISData(row) {
      console.log("row.takeoffLandInfo", row.takeoffLandInfo);
      // 更新GIS数据，使gisdata的值符合作图的形式
      row.takeoffLandInfo &&
        row.takeoffLandInfo.forEach((detail, index) => {
          if (detail.type === "圆形") {
            this.cirularpush(detail.pointInfo, index, "main1");
            console.log("圆形更新");
          } else if (detail.type === "多边形") {
            this.polygonalpush(detail.pointInfo, index, "main1");
            console.log("多边形更新");
          } else if (detail.type === "点线形") {
            this.straightpush(detail.pointInfo, index, "main1");
            console.log("点线形更新");
          }
          // console.log("飞机起降场信息更新");
        });

      row.airlineInfo &&
        row.airlineInfo.forEach((detail, index) => {
          if (detail.type === "圆形") {
            this.cirularpush(detail.pointInfo, index, "main2");
            console.log("圆形更新");
          } else if (detail.type === "多边形") {
            this.polygonalpush(detail.pointInfo, index, "main2");
            console.log("多边形更新");
          } else if (detail.type === "点线形") {
            this.straightpush(detail.pointInfo, index, "main2");
            console.log("点线形更新");
          }
          // console.log("航线信息更新");
        });

      row.workInfo &&
        row.workInfo.forEach((detail, index) => {
          if (detail.type === "圆形") {
            this.cirularpush(detail.pointInfo, index, "main3");
            console.log("圆形更新");
          } else if (detail.type === "多边形") {
            this.polygonalpush(detail.pointInfo, index, "main3");
            console.log("多边形更新");
          } else if (detail.type === "点线形") {
            this.straightpush(detail.pointInfo, index, "main3");
            console.log("点线形更新");
          }
          // console.log("作业信息更新");
        });

      row.specialInfo &&
        row.specialInfo.forEach((detail, index) => {
          if (detail.type === "圆形") {
            this.cirularpush(detail.pointInfo, index, "main4");
            console.log("圆形更新");
          } else if (detail.type === "多边形") {
            this.polygonalpush(detail.pointInfo, index, "main4");
            console.log("多边形更新");
          } else if (detail.type === "点线形") {
            this.straightpush(detail.pointInfo, index, "main4");
            console.log("点线形更新");
          }
          // console.log("特殊信息更新");
        });

      // console.log(this.gisdata.circular)
    },

    // 获取表格数据
    async fetchTableData() {
      try {
        const response = await axios.post(
          "http://47.99.75.194:8082/module3/searchandsort",
          null,
          {
            params: {
              sortedField: this.selectedSort,
              keyword: this.searchQuery,
              sortedOrder: this.inverseSort,
            },
          }
        );
        if (response.data.code === 0) {
          this.tableData = response.data.data;
        }
        this.refreshGISdata();
      } catch (error) {
        console.error("获取表格数据失败", error);
      }
    },
    sortTable() {
      // 重新获取排序后的数据
      this.fetchTableData();
    },
    sortInverse() {
      this.inverseSort = !this.inverseSort;
      // console.log(this.inverseSort);
      this.fetchTableData();
    },

    filterTable() {
      // 触发搜索过滤，重新获取数据
      this.fetchTableData();
    },
    refreshTable() {
      // 刷新表格数据，重置搜索和排序
      this.selectedSort = "id";
      this.searchQuery = "";
      this.fetchTableData();
    },
    handleViewDetails(row) {
      this.selectedDetails = row; // 将点击的行数据保存
      this.statusDialogVisible = true; // 显示弹窗
      this.$refs.statusDialog.refreshChange();
      this.drawgis(row);
    },
    handleViewDetailsHover(row) {
      this.selectedDetails = row; // 将点击的行数据保存
      this.statusDialogVisible = true; // 显示弹窗
    },
    hoverLeave() {
      this.statusDialogVisible = false;
    },
    submitVisibleChange() {
      this.statusSubmitDialogVisible = true;
    },
    withdrawVisibleChange() {
      this.statusWithdrawDialogVisible = true;
    },

    // 添加实体函数
    addEntity(id1, id2, entity) {
      const key = `${id1}-${id2}`; // 组合 id1 和 id2 作为唯一键
      this.entityMap[key] = entity; // 存储实体
    },

    // 获取实体函数
    getEntity(id1, id2) {
      const key = `${id1}-${id2}`; // 组合 id1 和 id2 生成键
      return this.entityMap[key]; // 获取对应实体
    },
    entityViewChange(id1, id2) {
      // console.log(id1,id2);

      console.log(id1, id2);
      if (Cesium.defined(this.getEntity(id1, id2))) {
        window.viewer.flyTo(this.getEntity(id1, id2));
      }
    },

    refreshGISdata() {
      this.gisdata = {
        circular: [],
        polygonal: [],
        straight: [],
      };
      // console.log("刷新GIS数据");
    },
    cirularpush(detail, index, infoid) {
      // 第一句话后续可以去掉 注意数据类型
      console.log("typeof detail", typeof detail);
      console.log("圆形detail", detail);
      // detail=JSON.parse(detail.replace(/([{,])\s*([a-zA-Z_]\w*)\s*:/g, '$1"$2":'));
      this.gisdata.circular.push(
        ...detail.map((coord) => ({
          longitude: coord.longitude,
          latitude: coord.latitude,
          minAltitude: coord.minAltitude,
          maxAltitude: coord.maxAltitude,
          radius: coord.radius,
          activeidentityid: infoid,
          index: index,
        }))
      );
      // console.log(this.gisdata.circular);
    },

    polygonalpush(detail, index, infoid) {
      // 第一句话后续可以去掉 注意数据类型
      // detail=JSON.parse(detail.replace(/([{,])\s*([a-zA-Z_]\w*)\s*:/g, '$1"$2":'));
      console.log("typeof detail:", typeof detail);
      console.log("多边形detail", detail);
      const polygonalData = {
        coordinates: [], // 存放经纬度数组
        minAltitude: null, // 存放最小高度数组
        maxAltitude: null, // 存放最大高度数组
        index: index,
        activeidentityid: infoid,
      };
      const firstPoint = detail[0];
      polygonalData.minAltitude = firstPoint.minAltitude;
      polygonalData.maxAltitude = firstPoint.maxAltitude;

      detail.forEach((point) => {
        // 将经纬度信息推入 coordinates 数组
        polygonalData.coordinates.push({
          longitude: point.longitude,
          latitude: point.latitude,
        });
      });
      console.log(polygonalData);
      this.gisdata.polygonal.push(polygonalData);
    },

    straightpush(detail, index, infoid) {
      // 第一句话后续可以去掉 注意数据类型
      //  detail=JSON.parse(detail.replace(/([{,])\s*([a-zA-Z_]\w*)\s*:/g, '$1"$2":'));
      console.log("typeof detail:", typeof detail);
      console.log("点线形detail", detail);
      const straightData = {
        coordinates: [], // 存放经纬度高数组
        index: index,
        activeidentityid: infoid,
      };
      detail.forEach((point) => {
        // 将经纬度信息推入 coordinates 数组
        straightData.coordinates.push({
          longitude: point.longitude,
          latitude: point.latitude,
          altitude: point.altitude,
        });
      });
      console.log(straightData);
      this.gisdata.straight.push(straightData);
    },
  },

  watch: {
    // 监听 statusDialogVisible 的变化
    statusDialogVisible(newValue, oldValue) {
      if (newValue === false && oldValue === true) {
        // 当 statusDialogVisible 从 1 变为 0 时，调用子组件的 resetSelection 方法
        this.$refs.goodTable.resetSelection();
        // console.log('resetSelection called');
      }
    },
  },
};
</script>


<style scoped>
h3 {
  color: #ffffff;
}

.page-all-content{
  /* background-color: blue; */
  height: 100%;
  width: 100%;
}

/* 顶部内容区样式 */
.header-content {
  /* position: relative; */
  width: 100%;
  /* 使其占据整个宽度 */
  height: 4%;
  background: url("@/assets/img/module1/page1top.png") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  /* padding: 5px; */
  /* 增加内部间距 */
}

/* 标题样式 */
.header-title {
  background-image: linear-gradient(180deg, rgba(200, 215, 228, 1) 0, rgba(255, 255, 255, 1) 100%);
  position: relative;
  flex: 2;
  margin-left: 3%;
  /* width: 20%;
  height: 20%; */
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  text-align: left;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* 图标样式 */
.header-icon {
  position: relative;
  width: 22px;
  height: 20px;
  margin-left: 20px;
  /* 与其他内容间隔 */
  margin-top: -20px;
}

#cesiumContainer-module2-ps{
  /* position: relative; */
  margin-top: 0.5%;
  top: 0%;
  left: 0%;
  width: 100%;
  /* 让图片宽度覆盖整个容器 */
  height: 95.5%;
  /* 让图片高度覆盖整个容器 */
  z-index: 0;
  /* 将背景图片置于内容下层 */
  ;
  /* background-color: white; */
  background-size: 100% 100%;
}

.image_3 {
  position: relative;
  /* 图片绝对定位，不影响布局 */
  top: 0%;
  left: 0%;
  width: 100%;
  /* 让图片宽度覆盖整个容器 */
  height: 100%;
  /* 让图片高度覆盖整个容器 */
  z-index: 0;
  /* 将背景图片置于内容下层 */
  background-size: 100% 100%;
}


.left-panel-container {
  position: absolute;
  /* 固定在左上角 */
  top: 10%;
  left: 17%;
  width: 40%;
  /* 面板的宽度 */
  height: 90%;
  /* 面板的高度，占据整个视口高度 */
  /* background-color: #333; */
  /* 面板的背景颜色 */
  color: white;
  /* 面板中的文字颜色 */
  padding: 20px;
  /* 内边距 */
  z-index: 1;
  /* 确保面板显示在其他元素上方 */
  pointer-events:none;
}

.right-panel-container {
  position: absolute;
  /* 固定在左上角 */
  top: 9.5%;
  right: 1%;
  width: 22%;
  /* 面板的宽度 */
  height: 82%;
  /* 面板的高度，占据整个视口高度 */
  
  /* 面板的背景颜色 */
  color: white;
  /* 面板中的文字颜色 */
  padding: 20px;
  /* 内边距 */
  z-index: 1;
  /* 确保面板显示在其他元素上方 */
  pointer-events:none;
}

.img_left_title  {
  position: absolute;
  left: 5%;
  top: 5%;
  background-size: 100% 100%;
  /* background-color: rgba(200, 215, 228, 1); */
}

.text_left_title {

  position: absolute;
  left: 19%;
  top: 5.9%;
  width: 60%;

  overflow-wrap: break-word;
  
  background-image: linear-gradient(180deg,
  rgba(200, 215, 228, 1) 0,
  rgba(255, 255, 255, 1) 100%);
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.table-button-display {
  background-image: url('@/assets/img/module1/button-tijiao.png'); 
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */
  background-color: transparent;
  color: transparent;
  left: 46%;
  top: 5%;
  height: 3%;
  width: 10%;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 8px;
  pointer-events:auto;
}

.table-button-hidden {
  background-image: url('@/assets/img/module1/button-bohui.png'); 
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */
  background-color: transparent;
  color: transparent;
  left: 46%;
  top: 5%;
  height: 3%;
  width: 10%;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 8px;
  pointer-events:auto;
}



.table-actions {
  position: absolute;
  /* background-color: #ffffff; */
  left: 5%;
  top: 10%;
  z-index: 1;
  width: 95%;
  height: 7%;
  pointer-events:auto;
}

.search-input {
  position: absolute;
  left: 0%;
  top: 6%;
  height: 60%;
  width: 20%;
  z-index: 1;
  border: none; 
  background-image:url('@/assets/img/module2/search.png');
  background-size: contain; /* 背景图片覆盖按钮大小 */
  background-color: transparent;
  background-size: 100% 100%; /* 背景图片覆盖按钮大小 */
  /* color: #ffffff; */
  padding-left:  10px; /* 添加内边距 */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight:NaN;
  color: #ffffff;
}

.search-input::placeholder {
  font-family: AlibabaPuHuiTi_2_55_Regular;
  color: #ffffff;
  font-weight:NaN;
  font-size: 14px;
  padding-left:  6px; /* 添加内边距 */
}

.filter-button {
  background-image:url('@/assets/img/module2/filtericon1.png'); 
  position: absolute;
  background-size: contain; /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  color:transparent;
  left: 18%;
  top: 24%;
  width: 20px;
  height: 20px;
  z-index: 3;
  border: none;
  cursor: pointer;
  filter: brightness(0.1);
}

.filer-button:active {
  opacity: 0.8; /* 点击时使按钮变暗 */
}

.sort-select {
  position: absolute;
  left: 22%;
  top: 6%;
  width: 18%;
  height: 60%;
  z-index: 1;
  background-image:url('@/assets/img/module2/search.png');
  background-size: 100% 100%; /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  border: none; /* 去除边框 */
  border-radius: 4px; /* 设置圆角 */
  color: #ffffff; /* 设置文字颜色 */
  padding-left: 10px; /* 设置左侧内边距 */
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-weight:NaN;
}

.sort-select-item{
  /* 不支持设置图片 */
  /* background-image:url('@/assets/img/module2/table.png'); */
  background-color: black;
  background-size: 100% 100%; 
  color: #ffffff; /* 设置文字颜色 */
}



.sort-button{
  background-image:url('@/assets/img/module2/sorticon1.png'); 
  position: absolute;
  background-size: contain; /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  color:transparent;
  left: 40%;
  top: 11%;
  width: 5%;
  height: 60%;
  z-index: 3;
  border: none;
  cursor: pointer;


}





.table-container2 {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 30%;
  height: 80%;
  z-index: 1;
  display: block;
}

.table-context {
  position: absolute;
  /* background-color: rgb(0, 247, 255); */
  left: 5%;
  top: 15%;
  z-index: 1;
  width: 60%;
  height: 70%;
}


/* 旧元素 */

.page-with-background{
    /* background-image: url("@/assets/img/test/bgp.png"); */
    background-size: cover;
  height: 83vh;
  margin-top: 5px;


}
.plan-diolog {
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  height: 80%;
  /* 设置高度，使布局固定 */
}

.plan-diolog-left-pane {
  width: 45%;
  /* 左侧占 50% 宽度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.plan-diolog-left-up-pane {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.plan-diolog-left-down-pane {
  padding: 10px;
  border-radius: 5px;
}

.plan-diolog-right-pane {
  width: 55%;
  /* 右侧占 35% 宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
}



h1 {
  color: #ffffff;
}

h2 {
  color: #ffffff;
}

h3 {
  color: #ffffff;
}
</style>